<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/api/auth";

const router = useRouter();

// 表单数据
const loginForm = ref({
  username: "",
  password: "",
});

// 表单验证状态
const isLoading = ref(false);
const errorMessage = ref("");

// 登录处理函数
const handleLogin = async () => {
  // 基本验证
  if (!loginForm.value.username || !loginForm.value.password) {
    errorMessage.value = "请输入用户名和密码";
    return;
  }

  isLoading.value = true;
  errorMessage.value = "";

  try {
    // 调用登录API
    const response = await login({
      username: loginForm.value.username,
      password: loginForm.value.password,
    });

    // 保存token和用户信息
    localStorage.setItem("token", response.access_token);
    localStorage.setItem("user", JSON.stringify(response.user));

    // 跳转到内部页面
    router.push("/internal");
  } catch (error) {
    // 显示错误信息
    errorMessage.value =
      typeof error === "string" ? error : "登录失败，请检查用户名和密码";
  } finally {
    isLoading.value = false;
  }
};

// 处理Enter键登录
const handleKeyPress = (event: KeyboardEvent) => {
  if (event.key === "Enter") {
    handleLogin();
  }
};

// 跳转到注册页
const goToRegister = () => {
  router.push("/register");
};
</script>

<template>
  <div class="login-page">
    <div class="login-container">
      <!-- 登录表单 -->
      <div class="login-form">
        <!-- 错误提示 -->
        <div v-if="errorMessage" class="error-alert">
          <span class="error-icon">⚠</span>
          <span class="error-text">{{ errorMessage }}</span>
        </div>

        <div class="form-item">
          <div class="input-label">
            <span class="label-text">用户名</span>
          </div>
          <input
            v-model="loginForm.username"
            type="text"
            class="form-input"
            placeholder="请输入用户名"
            @keypress="handleKeyPress"
          />
        </div>

        <div class="form-item">
          <div class="input-label">
            <span class="label-text">密码</span>
          </div>
          <input
            v-model="loginForm.password"
            type="password"
            class="form-input"
            placeholder="请输入密码"
            @keypress="handleKeyPress"
          />
        </div>

        <button
          class="login-button"
          :class="{ loading: isLoading }"
          @click="handleLogin"
          :disabled="isLoading"
        >
          <span v-if="!isLoading">登录</span>
          <span v-else>登录中...</span>
        </button>

        <div class="login-footer">
          <div class="footer-link">忘记密码?</div>
          <div class="footer-link" @click="goToRegister">注册账号</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .login-container {
    width: 420px;
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.08) 0%,
      rgba(49, 190, 255, 0.03) 100%
    );
    border-radius: 16px;
    padding: 40px;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
    animation: slideIn 0.5s ease-out;

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .login-form {
      .error-alert {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: rgba(255, 107, 107, 0.1);
        border: 1px solid rgba(255, 107, 107, 0.3);
        border-radius: 8px;
        margin-bottom: 20px;
        animation: slideDown 0.3s ease;

        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .error-icon {
          color: #ff6b6b;
          font-size: 16px;
        }

        .error-text {
          color: #ff6b6b;
          font-size: 14px;
          font-family: "Alibaba PuHuiTi", sans-serif;
        }
      }

      .form-item {
        margin-bottom: 24px;

        .input-label {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;

          .label-icon {
            font-size: 16px;
          }

          .label-text {
            font-size: 14px;
            font-weight: 500;
            color: #f6f9fe;
            font-family: "Alibaba PuHuiTi", sans-serif;
          }
        }

        .form-input {
          width: 100%;
          height: 48px;
          background: rgba(49, 190, 255, 0.05);
          border: 1px solid rgba(49, 190, 255, 0.25);
          border-radius: 8px;
          padding: 0 16px;
          color: #f6f9fe;
          font-size: 14px;
          font-family: "Alibaba PuHuiTi", sans-serif;
          transition: all 0.3s ease;
          outline: none;

          &::placeholder {
            color: rgba(246, 249, 254, 0.4);
          }

          &:focus {
            border-color: rgba(49, 190, 255, 0.5);
            background: rgba(49, 190, 255, 0.08);
            box-shadow: 0 0 0 3px rgba(49, 190, 255, 0.1);
          }

          &:hover {
            border-color: rgba(49, 190, 255, 0.35);
          }
        }
      }

      .login-button {
        width: 100%;
        height: 48px;
        background: linear-gradient(
          135deg,
          rgba(49, 190, 255, 0.8) 0%,
          rgba(49, 190, 255, 0.6) 100%
        );
        border: 1px solid rgba(49, 190, 255, 0.4);
        border-radius: 8px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        font-family: "YouSheBiaoTiHei", sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 8px;
        outline: none;

        &:hover:not(:disabled) {
          background: linear-gradient(
            135deg,
            rgba(49, 190, 255, 1) 0%,
            rgba(49, 190, 255, 0.8) 100%
          );
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(49, 190, 255, 0.4);
        }

        &:active:not(:disabled) {
          transform: translateY(0);
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }

        &.loading {
          animation: buttonPulse 1.5s ease-in-out infinite;
        }

        @keyframes buttonPulse {
          0%,
          100% {
            opacity: 0.8;
          }
          50% {
            opacity: 1;
          }
        }
      }

      .login-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(49, 190, 255, 0.15);

        .footer-link {
          font-size: 13px;
          color: rgba(49, 190, 255, 0.8);
          cursor: pointer;
          transition: all 0.3s ease;
          font-family: "Alibaba PuHuiTi", sans-serif;

          &:hover {
            color: #31beff;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
